<template>
  <el-form
    ref="dataForm"
    :model="dataForm"
    :rules="dataRule"
    v-bind='$attrs'
    :label-width="dataFormConfig.baseConfig.labelWidth + 'px'">
    <el-row>
      <slot name="firstLine"></slot>
      <template v-for="(item, index) in formDataList">
        <template v-if="dataFormConfig[item] && !dataFormConfig[item].hidden">
          <el-col :key="index" v-if="!$slots[item]" :span="(dataFormConfig[item] && dataFormConfig[item].span) || dataFormConfig.baseConfig.span">
            <template v-if="dataFormConfig.baseConfig.type === 'INFO'">
              <el-form-item
                v-if="Object.keys(dataFormConfig).indexOf(item) !== -1 && !dataFormConfig[item].baseConfig"
                :label="dataFormConfig[item].label + '：' "
                :label-width="(dataFormConfig[item].labelWidth || dataFormConfig.baseConfig.labelWidth) + 'px'">
              <span v-if="dataFormConfig[item].config && dataFormConfig[item].config.selectType" style="display: inline-block">
                {{dataForm[item] | dict(dataFormConfig[item].config.selectType)}}
              </span>
                <xkl-select-common
                  style="width: 100%"
                  v-else-if="dataFormConfig[item].isLink"
                  v-model="dataForm[item]"
                  :config="dataFormConfig[item].config"></xkl-select-common>
                <span v-else-if="dataFormConfig[item].isStatic" style="display: inline-block">
                {{dataFormConfig[item].config.dataList.find(inner => inner.value === dataForm[item]) && dataFormConfig[item].config.dataList.find(inner => inner.value === dataForm[item]).label}}
              </span>
                <el-tooltip v-else class="item" effect="dark" :disabled="!!dataForm[item] && dataForm[item].length < 10" :content="dataForm[item] + ''" placement="top">
                <span style="display: inline-block;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 80%">
                {{dataForm[item]}}
                </span>
                </el-tooltip>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item
                v-if="Object.keys(dataFormConfig).indexOf(item) !== -1 && !dataFormConfig[item].baseConfig"
                :label="dataFormConfig[item].label" :prop="item"
                :label-width="(dataFormConfig[item].labelWidth || dataFormConfig.baseConfig.labelWidth) + 'px'">
                <xkl-select-common
                  style="width: 100%"
                  v-if="dataFormConfig[item].type === 'select'"
                  v-model="dataForm[item]"
                  :config="dataFormConfig[item].config"
                  :disabled="dataFormConfig[item].disabled"
                  :placeholder="dataFormConfig[item].placeholder || dataFormConfig[item].label"
                  clearable></xkl-select-common>
                <xkl-date-picker
                  style="width: 100%"
                  v-else-if="dataFormConfig[item].type && (dataFormConfig[item].type.split('-')[0] === 'date')"
                  v-model="dataForm[item]"
                  :type="dataFormConfig[item].type && (dataFormConfig[item].type.split('-')[1] || 'date')"
                  :disabled="dataFormConfig[item].disabled"
                  :placeholder="dataFormConfig[item].placeholder || dataFormConfig[item].label"
                  :format="dataFormConfig[item].format"
                  clearable></xkl-date-picker>
                <el-input
                  v-else
                  v-model="dataForm[item]"
                  :type="dataFormConfig[item].type"
                  :disabled="dataFormConfig[item].disabled"
                  :rows="4"
                  :placeholder="dataFormConfig[item].placeholder || dataFormConfig[item].label"
                  :maxLength="dataFormConfig[item].maxLength"
                  clearable></el-input>
              </el-form-item>
            </template>
          </el-col>
        </template>
        <slot :name="item"></slot>
      </template>
      <el-col v-if="$slots.searchAndRefresh" :span="dataFormConfig.baseConfig.searchConfigSpan || searchAndRefreshSpan">
        <el-form-item label-width="40px" style="text-align: right">
          <slot name="searchAndRefresh"></slot>
          <el-button v-if="$attrs.advanced" @click="advancedQuery()">高级查询</el-button>
        </el-form-item>
      </el-col>
      <slot name="lastLine"></slot>
    </el-row>
    <el-row v-if="$slots.functionBtns">
      <el-col style="text-align: right">
        <el-form-item style="margin-bottom: 10px">
          <slot name="functionBtns"></slot>
        </el-form-item>
      </el-col>
    </el-row>
    <advanced-query v-if="advancedQueryVisible" ref="advancedQueryShow" :advancedData="advancedData" @resetForm="resetForm" @searchData="searchData"></advanced-query>
  </el-form>
</template>
<script>
  import AdvancedQuery from '../advanced-query'
  export default {
    name: 'xklForm',
    components: {
      AdvancedQuery
    },
    props: {
      dataForm: {
        type: Object,
        required: true,
        default: () => {
          return {}
        }
      },
      dataFormConfig: {
        type: Object,
        required: true
      },
      dataRule: {
        type: Object
      },
      advancedData: {
        type: Array
      }
    },
    data () {
      return {
        dataList: [],
        formDataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        searchAndRefreshSpan: 0,
        advancedQueryVisible: false
      }
    },
    watch: {
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.formDataList = Object.keys(this.dataForm)
        let ratio = 24 / this.dataFormConfig.baseConfig.span
        let num = Object.keys(this.dataFormConfig).length - 1
        if (num % ratio === 0) {
          this.searchAndRefreshSpan = 24
        } else {
          this.searchAndRefreshSpan = 24 - (num % ratio) * (24 / ratio)
        }
        this.publicCheck()
      },
      publicCheck () {
        Object.keys(this.dataFormConfig).forEach(item => {
          if (this.dataFormConfig[item].isRequired) {
            this.dataRule[item] && this.dataRule[item].length
            ? this.dataRule[item].push({
              required: true,
              message: this.dataFormConfig[item].label + '不能为空',
              trigger: this.dataFormConfig[item].type && this.dataFormConfig[item].type !== 'textarea' ? 'change' : 'blur'
            })
            : this.dataRule[item] = [{
              required: true,
              message: this.dataFormConfig[item].label + '不能为空',
              trigger: this.dataFormConfig[item].type && this.dataFormConfig[item].type !== 'textarea' ? 'change' : 'blur'
            }]
          }
        })
      },
      advancedQuery () {
        this.advancedQueryVisible = true
        this.$nextTick(() => {
          this.$refs.advancedQueryShow.init()
        })
      },
      resetForm () {
        this.$emit('resetForm')
      },
      searchData (sql) {
        this.$emit('searchData', sql)
      }
    },
    computed: {}
  }
</script>
<style>
  .el-form-item{
    max-height: 36px;
  }
</style>
